import React from "react";
import style from "./CardList.module.scss";
import { useLinkList } from "./useLinkList";
export default function CardList(): React.ReactElement {
  const { linkList, goToLink } = useLinkList();
  return (
    <div className={style["card-list-wrap"]}>
      <h2>🥇友情链接</h2>
      <div className={style['card-box']}>
        {linkList.map((item) => (
          <div className={style['card-item']} key={item.id}>
            <div className={style['card-content']} onClick={() => goToLink(item)}>
              <img className={style['card-logo']} v-lazy="item.logo" />
              <div className={style['card-name']}>{item.name}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
